<template>
  <div class="topShadow"></div>
  <div class="selectBox divide-x shadow-xl">
    <div class="SBLeft">
      <el-icon style="color: #599fff"><location-filled /></el-icon>
      <span class="text-sm">常住地 - </span>
      <el-dropdown @command="selectCity" placement="bottom-start">
        <span class="el-dropdown-link">
          {{ currentProvice ? currentProvice : "云南"
          }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu
            class="w-500px h-250px grid grid-cols-7 text-center"
          >
            <el-dropdown-item
              class="inline-block !bg-white"
              v-for="item in optionsArea"
              :key="item.id"
              :command="item.value"
              >{{ item.value }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="SBRight">
      <el-dropdown @command="selectType">
        <span class="el-dropdown-link">
          {{ currentVisaType ? currentVisaType : "签证类型"
          }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="item in optionsType"
              :key="item.id"
              :command="item.value"
              >{{ item.value }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
  <div class="list">
    <div class="listHead text-xs divide-x">
      <span class="cursor-pointer pr-20px" @click="ZHSort">综合</span>
      <div class="price-sort">
        <el-dropdown @command="priceSort">
          <span class="el-dropdown-link text-xs">
            {{ currentPriceSort ? currentPriceSort : "价格"
            }}<el-icon class="el-icon--right relative top-2px"
              ><arrow-down
            /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                :command="item.name"
                v-for="item in priceSortType"
                :key="item.sortType"
                class="!text-xs"
                >{{ item.name }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <span class="cursor-pointer pl-20px" @click="timeSort">办理时长</span>
    </div>
    <div class="listContent">
      <div
        class="item"
        v-for="(item, index) in contentList"
        :key="item.id"
        @click="selected(item, index)"
        :class="currentIndex == index ? 'isActive' : 'notActive'"
      >
        <span class="tag text-xs bg-emerald-400 text-white p-3px mr-10px">{{
          item.tag
        }}</span>
        <span class="title text-sm">{{ item.title }}</span>
        <div class="remark text-xs">{{ item.remark }}</div>
        <!-- <div class="split-line"></div> -->
      </div>
    </div>
  </div>
</template>
<script>
import { onMounted, reactive, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { ArrowDown } from "@element-plus/icons-vue";
export default {
  name: "productFilter",
  props: {
    state: {
      type: Object,
      default: {},
    },
  },

  setup(props, { emit }) {
    let scourceData = reactive({});
    let currentIndex = ref(0);
    // 当前选中省份
    let currentProvice = ref("");
    // 当前选中签证类型
    let currentVisaType = ref("");
    // 价格排序
    let currentPriceSort = ref("");
    watch(
      () => props.state,
      (newVal, oldVal) => {
        // console.log(newVal);
        scourceData = newVal;
        console.log("scourceData--->", scourceData);
      }
    );
    // 选择办理省份
    const selectCity = (command) => {
      ElMessage(`当前选中省份： ${command}`);
      currentProvice.value = command;
    };
    // 选择签证类型
    const selectType = (command) => {
      ElMessage(`当前选中签证类型： ${command}`);
      currentVisaType.value = command;
    };
    // 综合排序
    const ZHSort = () => {
      console.log("综合排序...");
    };
    // 价格排序
    const priceSort = (command) => {
      ElMessage(`当前价格排序： ${command}`);
      currentPriceSort.value = command;
    };
    // 办理时长排序
    const timeSort = () => {
      console.log("办理时长排序...");
    };
    let priceSortType = reactive([
      { sortType: "LTH", name: "价格从低到高" },
      { sortType: "HTL", name: "价格从高到低" },
    ]);
    let optionsArea = reactive([
      { id: 0, value: "北京" },
      { id: 1, value: "天津" },
      { id: 2, value: "河北" },
      { id: 3, value: "山西" },
      { id: 4, value: "内蒙古" },
      { id: 5, value: "辽宁" },
      { id: 6, value: "吉林" },
      { id: 7, value: "黑龙江" },
      { id: 8, value: "上海" },
      { id: 9, value: "江苏" },
      { id: 11, value: "浙江" },
      { id: 12, value: "安徽" },
      { id: 13, value: "福建" },
      { id: 14, value: "江西" },
      { id: 15, value: "山东" },
      { id: 16, value: "河南" },
      { id: 17, value: "湖北" },
      { id: 18, value: "湖南" },
      { id: 19, value: "广东" },
      { id: 20, value: "广西" },
      { id: 21, value: "海南" },
      { id: 22, value: "重庆" },
      { id: 23, value: "四川" },
      { id: 24, value: "贵州" },
      { id: 25, value: "云南" },
      { id: 26, value: "西藏" },
      { id: 27, value: "陕西" },
      { id: 28, value: "甘肃" },
      { id: 29, value: "青海" },
      { id: 30, value: "宁夏" },
      { id: 31, value: "新疆" },
      { id: 32, value: "台湾" },
      { id: 33, value: "香港" },
      { id: 34, value: "澳门" },
    ]);
    let optionsType = reactive([
      { value: "全部" },
      { value: "商务签" },
      { value: "工作签" },
      { value: "探亲访友签" },
      { value: "留学签" },
      { value: "再入境签" },
    ]);
    let contentList = reactive([
      {
        id: 1,
        tag: "商务签",
        title: "[北京陪签]",
        remark: "从巅峰走向下坡路，屈臣氏的辉煌没能躲过时间...",
      },
      {
        id: 2,
        tag: "再入境签",
        title: "[北京递交]",
        remark: "从巅峰走向下坡路，屈臣氏的辉煌没能躲过时间...",
      },
      {
        id: 3,
        tag: "探亲访友签",
        title: "[北京陪签]",
        remark: "从巅峰走向下坡路，屈臣氏的辉煌没能躲过时间...",
      },
    ]);

    onMounted(() => {});

    const selected = (item, index) => {
      currentIndex.value = index;
    };

    return {
      optionsArea,
      optionsType,
      contentList,
      selected,
      currentIndex,
      scourceData,
      currentProvice,
      currentVisaType,
      selectCity,
      selectType,
      priceSort,
      ZHSort,
      timeSort,
      currentPriceSort,
      priceSortType,
    };
  },
};
</script>

<style lang="less">
.topShadow {
  height: 40px;
  width: 100%;
  border-radius: 2px;
  position: absolute;
  background-color: #599fff;
}
.selectBox {
  width: 92%;
  margin: auto;
  margin-top: 12px;
  height: 40px;
  line-height: 20px;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  border-radius: 2px;
  z-index: 999;
  position: relative;
  .SBLeft {
    height: 40px;
    line-height: 40px;
    width: 50%;
    text-align: center;
    .el-icon {
      top: 2px;
      margin-right: 3px;
    }
    .el-dropdown {
      height: 40px;
      line-height: 40px;
      @apply align-middle;

      span {
        display: inline-block;
        @apply text-sm;
      }
    }
  }
  .SBRight {
    width: 50%;
    height: 40px;
    line-height: 40px;
    margin-right: -10px;
    padding: 0 15px;
    text-align: center;
    .el-dropdown {
      height: 40px;
      line-height: 40px;
      @apply align-middle;

      span {
        display: inline-block;
        @apply text-sm;
      }
      .el-icon {
        top: 2px;
      }
    }
  }
}
.list {
  width: 100%;
  .listHead {
    width: 100%;
    // background-color: red;
    text-align: center;
    // display: flex;
    padding: 20px;
    span {
    }
    .price-sort {
      width: 40%;
      display: inline-block;
    }
  }
  .listContent {
    width: 100%;
    .item {
      cursor: pointer;
      padding: 10px 10px;
      border-bottom: 1px solid #eee;
      .remark {
        padding: 5px 0;
        font-weight: normal;
      }
    }
    .isActive {
      background-color: #d9ecff;
      @apply font-bold;
      box-shadow: inset 5px 0px 0 #66b1ff;
    }
    .notActive {
      background-color: #fff;
    }
  }
}
</style>
